<template>
 <div class="newlogin">
    <!-- 背景区域 -->
    <div class="login-container">
      <!-- 登录区域 -->
      <div class="login_content" :class="{ active: isshow }">
        <div class="content_login" v-if="isshow">
          <!-- 登录设置 -->
          <h1 class="login_title">Sign in</h1>
          <el-form :model="loginInfo" :rules="loginRules" ref="loginRuleRef">
            <el-form-item prop="account">
              <el-input placeholder="请输入用户名" v-model="loginInfo.account">
              </el-input>
            </el-form-item>

            <el-form-item prop="password">
              <el-input
                placeholder="登录密码"
                v-model="loginInfo.password"
                type="password"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button  class="clickBtn " size="small" type="primary" plain @click="addloginBtn"
                >Signin</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="content_register" v-else>
          <!-- 注册设置-->
          <h1>Register</h1>
          <el-form :model="registerFrom" :rules="registerRules" ref="registerRuleRef" size="small">
            <!-- <el-form-item>
              <el-input
                placeholder="Email"
                v-model="registerList.email"
              ></el-input>
            </el-form-item> -->
            <el-form-item prop="idCardNum">
              <el-input
                placeholder="请输入身份证号码"
                v-model="registerFrom.idCardNum"
              ></el-input>
            </el-form-item>
            
            <el-form-item prop="age">
              <el-input
                placeholder="请输入年龄"
                v-model="registerFrom.age"
              ></el-input>
            </el-form-item>

               <el-form-item prop="phone">
              <el-input
                placeholder="请输入手机号"
                v-model="registerFrom.phone"
              ></el-input>
            </el-form-item>
            <el-form-item prop="name">
              <el-input
                placeholder="请输入姓名"
                v-model="registerFrom.name"
              ></el-input>
            </el-form-item>
          <div class="radioItem">
             <el-radio  class="radioItem-color" v-model="registerFrom.gender" label="男" size="small">男</el-radio>
              <el-radio  class="radioItem-color" v-model="registerFrom.gender" label="女" size="small">女</el-radio>
          </div>
            
        
             <el-form-item prop="username">
              <el-input
                placeholder="设置你的用户名"
                v-model="registerFrom.username"
              ></el-input>
            </el-form-item>
             <el-form-item prop="password" class="">
              <el-input
                placeholder="设置你的密码"
                v-model="registerFrom.password"
              ></el-input>
            </el-form-item>
         
            
           
          </el-form>
            <el-button size="small" class="clickBtn margin-top-20" type="primary" plain @click="RegisterBtn">Register</el-button>
        </div>
      </div>

      <!-- 浮板区域 -->
      <div class="welcom_content" :class="{ active: isshow }">
        <div class="boxone" v-if="isshow">
          <div class="toppadding">
          <h1 >你好!客户朋友</h1>
          <p>开始注册</p>
          <p>和我们一起秒杀吧!!</p>
          <div class="btns">
            <el-button size="large" type="info" @click="change">注册</el-button>
          </div>
          </div>
        </div>

        <div class="boxtwo" v-else>
             <div class="toppadding">
          <h1>客户欢迎回来！</h1>
          <p>与我们保持联系</p>
          <p>请登录你的账户</p>
          <div class="btns">
            <el-button size="large" type="success" @click="change">登录</el-button>
          </div>
             </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive,ref } from 'vue'
import {useRouter} from 'vue-router'
import {ApiLogin,ApiRegister,ApiRegisterValidate} from '../api/index'
import {successMessage,errorMessage,warnMessage} from '../utils/messageTips'
import {storageSession,storageLocal} from '@/storage/index' 
import permissionRoute from '@/utils/permission'
import {useStore} from 'vuex'
export default defineComponent({
   name:'loginform',
 
   setup(){
        const router = useRouter()
        const store = useStore()
         // 登录字段
        let loginInfo = reactive<IGloginInfo>({
          account: 'LANHUAWEI',  //'HEKEJIAN',
          password: '123456' //"123456"

        })
      //  登录字段校验
       let loginRules = reactive<rules>({
          account: [
        {
          message: "登录名不能为空!!",
          required: true,
          trigger: "blur",
        },
        {
          min: 2,
          max: 30,
          message: "登录名长度必须在2到30位之间",
          trigger: "blur",
        }
      ],
      password: [
        {
          required: true,
          message: "密码不能为空",
          trigger: "blur",
        },
        {
          min: 4,
          max: 30,
          message: "密码位数至少大于4",
          trigger: "blur",
        }
      ]
      })
 // 注册字段检测
const ruleRegisterRef = ref<HTMLFormElement|null>(null)
const validatePhone = async (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error('请输入手机号！'))
  } else {
       const res = await ApiRegisterValidate({type:1,value:value}) as Record<string,any>
       if(res.code!=1){
         callback(new Error(res.message))
       }else{
         callback()
       }
  }
}

const validateIdCardNum = async (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error('请输入你的身份证号！'))
  } else {
       const res = await ApiRegisterValidate({type:2,value:value}) as Record<string,any>
       if(res.code!=1){
         callback(new Error(res.message))
       }else{
         callback()
       }
  }
}

const validatePassword = async (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error('请设置你的登录密码！'))
  } else {
       const res = await ApiRegisterValidate({type:3,value:value}) as Record<string,any>
       if(res.code!=1){
         callback(new Error(res.message))
       }else{
         callback()
       }
  }
}

const validateUsername = async (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error('请设置你的用户名！'))
  } else {
       const res = await ApiRegisterValidate({type:4,value:value}) as Record<string,any>
       if(res.code!=1){
         callback(new Error(res.message))
       }else{
         callback()
       }
  }
}


   let registerRules = reactive({
       idCardNum:[{validator:validateIdCardNum,trigger: 'blur'}],
       password:[{validator:validatePassword,trigger: 'blur'}],
       phone:[{validator:validatePhone,trigger: 'blur'}],
       username:[{validator:validateUsername,trigger: 'blur'}],
       name:[ {
          message: "你的身份证姓名!",
          required: true,
          trigger: "blur",
        },
        {
          min: 2,
          max: 30,
          message: "姓名名长度必须在2到30位之间",
          trigger: "blur",
        }],
        age:[ {
          message: "请输入你的年龄!",
          required: true,
          trigger: "blur",
        },]
   })




// 注册区域操作
  let registerRuleRef = ref<HTMLFormElement|null>(null)
  let registerFrom = reactive<IGRegister>({
    username:"",
    password:"",
    name:"",
    phone:"",
    gender:"",
    idCardNum:"",
    age:null
  })
  const RegisterBtn =  ()=>{
    if(registerFrom.gender==""){
      return warnMessage("未勾选性别")
    }else{
      registerRuleRef.value?.validate(async (valid:any)=>{
        if(valid){
          
          const res = await ApiRegister(registerFrom)  as Record<string,any>
          if(res.code==20000){
      successMessage(res.message)
       
          }else{
            warnMessage(res.message) 
          }
        
         
        }else{
          errorMessage("格式有错，请仔细检查！")
        }
          

      })
     
    }
    
  }




     let isshow = ref<boolean>(true)
     const change = ()=>{
         isshow.value = !isshow.value
     }
//  登录区域操作
  let loginRuleRef = ref<HTMLFormElement|null>(null)
   const  addloginBtn = ()=>{
      loginRuleRef.value?.validate( async (valid:any)=>{
          if(valid){
            const res = await ApiLogin(loginInfo) as Record<string,any>
            if(res.code!=1){
                 errorMessage(res.message)
            }else{
             successMessage(res.message)
           
           
             
             storageSession.setItem("token",res.data.token)
             storageSession.setItem("username",res.data.username)
            if(res.data.role.indexOf('admin')>=0){
            store.commit('authority/SET_ROUTES',permissionRoute.otherRoutes)
            store.dispatch('rulesconfig/asyncSetActivityRules')
            store.dispatch('rulesconfig/asyncSetAllRules')
             router.push('/')
            }else {
                store.commit('authority/SET_ROUTES',permissionRoute.baseRoutes)
               router.push('/shop')
            }
              
            
            }
          }else{
            errorMessage("输入格式错误，请重新输入！！")
          }
      })   
   }

       return {
         loginInfo,
         loginRules,
         change,
         isshow,
         addloginBtn,
         registerFrom,
         RegisterBtn,
         loginRuleRef,
         registerRules,
         registerRuleRef

       }
   }

})
</script>
<style lang="less" scoped>
.my-margin-bottom{
  margin-bottom: -100px;
}

.clickBtn{
 margin-left: 50%;
 transform: translateX(-50%);
}
.newlogin {
  position: relative;
  height: 380px;
  width: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
 
}
.login-container {
  border-radius: 25px;
  // opacity: 1;
  width: 50vw;
  height: 47vh;
  top: 10vh;
  left: 50vw;
}
.login_content {
  position: absolute;
  top: 0;
  left: 100%;
  height: 100%;
  width: 55%;
  transform: translateX(-100%);
  // background-color: rgb(18, 41, 85);
  // background-image: linear-gradient(to right, #f83600 0%, #f9d423 100%);
  background-color: rgb(37, 103, 97);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
  transition: all 1s;
}
.content_login {
  height: 100%;
  width: 100%;
 
  .login_title {
    margin-top: 20%;
    text-align: center;
    color: #fff;
  }
}
.content_register {
  height: 100%;
  width: 100%;
  h1 {
      // margin-top: 20%;
    font-size: 14px;
    text-align: center;
    color: #fff;
  }
}
.welcom_content {
  position: absolute;
  opacity: 0.8;
  left: 0;
  top: 0;
  height: 100%;
  width: 45%;
  // background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
// background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%);
background-color: rgb(56, 165, 201);
  border-bottom-left-radius: inherit;
  border-top-left-radius: inherit;
  border-right: none;
  transition: all 1s;
  .toppadding{
        margin-top: 70%; 
        transform: translateY(-50%); 
        
        }
}
.boxone {
  width: 100%;
  height: 100%;
  h1 {
    text-align: center;
    color: #fff;
  }
  p {
    text-align: center;
    font-size: 24px;
    color: rgb(135, 48, 161);
  }
}
.boxtwo {
  width: 100%;
  height: 100%;
  h1 {
    font-size: 20px;
    text-align:center;
    color: #fff;
  }
  p {
    text-align: center;
    font-size: 24px;
    color: rgb(135, 48, 161);
  }
}

.login_content.active {
  left: 0;
  transform: translateX(-0);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: inherit;
  border-top-left-radius: inherit;
  transition: all 1s;
}
.welcom_content.active {
  left: 100%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
  transform: translateX(-100%);
  transition: all 1s;
}
/deep/.el-input__inner {
  // background-color: transparent;
  border: 1px solid rgb(207, 193, 193);
  border-right: none;
  color: #080808;
}
/deep/.el-input__inner::placeholder {
   color:  #0a0a0a;
}
.btns {
  text-align: center;
}
.ridioItem{
  padding-left: 40px;
}
.el-radio{
  margin-left: 50px;
  margin-bottom: 10px;
}
.radioItem-color{
  color: rgb(14, 13, 13);
}

</style>
